import React from 'react';

export class App extends React.Component {
  constructor() {
    // 初始化父类的this
    super();
    // 组件状态
    this.state = {
      // 定义多个数据，就是对象的多个属性
      count: 1,
    };
    // this.clickHandler = this.clickHandler.bind(this);
  }

  // 事件处理函数
  // clickHandler() {
  //   console.log('==========', this);
  //   this.setState({ count: this.state.count + 2 });
  // }

  // 这是最友好的绑定this的方式
  clickHandler = () => {
    console.log('==========', this);
    this.setState({ count: this.state.count + 2 });
  };

  clickHandler2 = (e, step) => {
    this.setState({ count: this.state.count + step });
  };

  render() {
    console.log('当前组件实例this', this);
    return (
      <div>
        <h1>只有类组件才能定义组件状态(数据)</h1>
        <h2>{this.state.count}</h2>
        {/* 正确绑定this 1、新的箭头函数 */}
        {/* <button onClick={() => this.clickHandler()}>修改</button> */}
        {/* 正确绑定this 2、函数对象原型上bind方法 */}
        {/* <button onClick={this.clickHandler}>修改</button> */}
        {/* 正确绑定this 3、类的公有字段箭头函数方式 */}
        <button onClick={this.clickHandler}>修改</button>

        <button onClick={(e) => this.clickHandler2(e, 10)}>额外传参</button>
      </div>
    );
  }
}
